<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        header {
            text-align: center;
            padding: 30px;
            background-color: #2163dd;
            color: #fff;
        }

        .profile-pic img {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            margin-bottom: 10px;
        }

        h1,
        h2 {
            margin: 0;
        }

        main {
            padding: 20px;
        }

        section {
            margin-bottom: 30px;
        }

        h2 {
            margin-bottom: 10px;
        }

        ul {
            list-style-type: none;
            padding: 0;
        }

        li {
            margin-bottom: 5px;
        }

        footer {
            background-color: #2163dd;
            color: #fff;
            padding: 10px;
            text-align: center;
        }
    </style>
</head>

<body>
    <header>
        <h1 onclick="window.location.href = './home.html'">去首页</h1>
        <h2>我的个人页面</h2>
    </header>

    <main>
        <section>
            <h2>项目</h2>
            <ul>
                <li>
                    <h3>在线商城</h3>
                    <p>一个响应式的电子商务网站，具有登录、购物车、商品列表等功能。</p>
                </li>
                <li>
                    <h3>社交网络应用</h3>
                    <p>一个基于 React 和 Node.js 的社交网络应用，用户可以创建账户、发表帖子、添加好友等。</p>
                </li>
            </ul>
        </section>
    </main>

    <footer>
        <p>&copy; 2023 John Doe. All rights reserved.</p>
    </footer>
</body>

</html>